import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import qs from 'qs';
import _ from 'lodash';

import {
    Card,
    Tabs,
} from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';

import PageHearder from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
    addTab,
    getPageQuery,
} from '@/utils/utils';

import '@ant-design/compatible/assets/index.css';

import UserSurvey from './components/userSurvey';
import BindCabinet from './components/bindCabinet';
import BindOldShelf from './components/bindOldShelf';
import BindNewShelf from './components/bindNewShelf';
import TencentInfo from './components/tencentInfo';

const MyIcon = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1430304_s336w3vop5q.js', // 在 iconfont.cn 上生成
});

const { TabPane } = Tabs;
const { pathname } = window.location;

interface consumeDetailProps extends FormComponentProps {
    dispatch: Dispatch<any>;
    courierRecharge: any;
    loading: boolean;
    dataInfo: any;
    userInfo: any;
    userList: any;
    cabinetList: any;
    cabinetAllList: any;
    oldShelfList: any;
    oldShelfAllList: any;
    newShelfList: any;
    newShelfAllList: any;
    INITINFO: any;
    tencentDetail: any;
    userLoading: boolean;
    allCabinetLoading: boolean;
    allShelfLoading: boolean;
}

interface consumeDetailState {
    tabIndex: string;
    searchValues: any;
    pageIndex: number;
    pageSize: number;
}

@connect(({
    tencentConfig: {
        dataInfo,
        userInfo,
        userList,
        cabinetList,
        cabinetAllList,
        oldShelfList,
        oldShelfAllList,
        newShelfList,
        newShelfAllList,
        tencentDetail,
    },
    loading,
    common: { INITINFO },
}: any) => ({
    dataInfo,
    userInfo,
    userList,
    cabinetList,
    cabinetAllList,
    oldShelfList,
    oldShelfAllList,
    newShelfList,
    newShelfAllList,
    INITINFO,
    tencentDetail,
    loading: loading.effects['tencentConfig/fetchCabinetList'],
    userLoading: loading.effects['tencentConfig/fetchUserList'],
    allCabinetLoading: loading.effects['tencentConfig/fetchAllCabinet'],
    allShelfLoading: loading.effects['tencentConfig/fetchAllShelf'],
}))

class TencentConfigElem extends Component<consumeDetailProps, consumeDetailState> {
    state: consumeDetailState = {
        tabIndex: '1',
        searchValues: {},
        pageIndex: 1,
        pageSize: 20,
    };

    componentDidMount() {
        const { dispatch, location: { query: { tab } } }: any = this.props;
        this.setState({ tabIndex: tab });

        if (tab === '1') {
            dispatch({ type: 'tencentConfig/fetchNum' });
        }

        this.callbackImpower();
    }

    static getDerivedStateFromProps(nextProps: any, preState: any) {
        const { search } = nextProps.location;
        const query = qs.parse(search, { ignoreQueryPrefix: true });
        const {
            pageIndex,
            pageSize,
            tab,
            ...searchValues
        } = query;

        return {
            searchValues,
            tabIndex: tab,
            pageIndex: pageIndex || 1,
            pageSize: pageSize || 20,
        };
    }

    componentWillUnmount() {
        const { dispatch } = this.props;
        dispatch({ type: 'tencentConfig/clear' });
    }

    // 授权回调
    callbackImpower = () => {
        const { dispatch } = this.props;

        const {
            auth_code: authCode,
            expires_in: expiresIn,
        } = getPageQuery();

        if (authCode && expiresIn) {
            dispatch({
                type: 'tencentConfig/fetchCallback',
                payload: { authCode, expiresIn },
            }).then((res: any) => {
                if (res) {
                    addTab(dispatch, {
                        name: '公众号配置',
                        url: '/tencent/impower/config?tab=3',
                    });
                }
            });
        }
    }

    // 切换tabs
    changeTabs = (value: any) => {
        const { dispatch } = this.props;
        let name = '用户概况';
        if (value === '1') {
            dispatch({ type: 'tencentConfig/fetchNum' });
        }

        if (value === '2') {
            name = '绑定柜体';
        }
        if (value === '3') {
            name = '公众号配置';
        }
        if (value === '4') {
            name = '绑定旧货架';
        }
        if (value === '5') {
            name = '绑定新货架';
        }

        addTab(dispatch, {
            name,
            url: `/tencent/impower/config?tab=${value}`,
        });
    }

    // 切换搜索条件
    changeQuery = (query: any) => {
        const { dispatch } = this.props;

        addTab(dispatch, {
            name: '用户概况',
            url: `${pathname}?${qs.stringify(query)}`,
            isTopMenu: true,
        });
    }

    render() {
        const {
            tabIndex,
            searchValues,
            pageIndex,
            pageSize,
        } = this.state;

        const {
            dispatch,
            userInfo, userList,
            cabinetList,
            cabinetAllList,
            oldShelfList,
            oldShelfAllList,
            newShelfList,
            newShelfAllList,
            tencentDetail,
            INITINFO,
            loading,
            userLoading,
            allCabinetLoading,
            allShelfLoading
        } = this.props;
        
        return (
            <>
                <PageHearder />

                <Card bordered={false} className="cardTabs">
                    <Tabs activeKey={String(tabIndex)} onChange={this.changeTabs} type="card">
                        <TabPane
                            key="1"
                            tab={
                                <span>
                                    <MyIcon
                                        type="icon04-yonghuqingkuangfenxi"
                                        style={{
                                            color: tabIndex === '1' ? '#1890ff' : '',
                                        }}
                                    />
                                    用户概况
                                </span>
                            }
                        >
                            {
                                tabIndex === '1' && (
                                    <UserSurvey
                                        dispatch={dispatch}
                                        loading={userLoading}
                                        tabIndex={tabIndex}
                                        userInfo={userInfo}
                                        userList={userList}
                                        searchValues={searchValues}
                                        pageIndex={pageIndex}
                                        pageSize={pageSize}
                                        changeQuery={this.changeQuery}
                                    />
                                )
                            }
                        </TabPane>
                        <TabPane
                            key="2"
                            tab={
                                <span>
                                    <MyIcon
                                        type="iconguizi-cabinet"
                                        style={{
                                            color: tabIndex === '2' ? '#1890ff' : '',
                                        }}
                                    />
                                    绑定柜体
                                </span>
                            }
                        >
                            {
                                tabIndex === '2' && (
                                    <BindCabinet
                                        dispatch={dispatch}
                                        loading={loading}
                                        allCabinetLoading={allCabinetLoading}
                                        tabIndex={tabIndex}
                                        searchValues={searchValues}
                                        pageIndex={pageIndex}
                                        pageSize={pageSize}
                                        cabinetList={cabinetList}
                                        INITINFO={INITINFO}
                                        cabinetAllList={cabinetAllList}
                                        changeQuery={this.changeQuery}
                                    />
                                )
                            }
                        </TabPane>
                        <TabPane
                            key="4"
                            tab={
                                <span>
                                    <MyIcon
                                        type="iconguizi-cabinet"
                                        style={{
                                            color: tabIndex === '4' ? '#1890ff' : '',
                                        }}
                                    />
                                    绑定旧货架
                                </span>
                            }
                        >
                            {
                                tabIndex === '4' && (
                                    <BindOldShelf
                                        dispatch={dispatch}
                                        loading={loading}
                                        allShelfLoading={allShelfLoading}
                                        tabIndex={tabIndex}
                                        searchValues={searchValues}
                                        pageIndex={pageIndex}
                                        pageSize={pageSize}
                                        oldShelfList={oldShelfList}
                                        INITINFO={INITINFO}
                                        oldShelfAllList={oldShelfAllList}
                                        changeQuery={this.changeQuery}
                                    />
                                )
                            }
                        </TabPane>
                        <TabPane
                            key="5"
                            tab={
                                <span>
                                    <MyIcon
                                        type="iconguizi-cabinet"
                                        style={{
                                            color: tabIndex === '5' ? '#1890ff' : '',
                                        }}
                                    />
                                    绑定新货架
                                </span>
                            }
                        >
                            {
                                tabIndex === '5' && (
                                    <BindNewShelf
                                        dispatch={dispatch}
                                        loading={loading}
                                        allShelfLoading={allShelfLoading}
                                        tabIndex={tabIndex}
                                        searchValues={searchValues}
                                        pageIndex={pageIndex}
                                        pageSize={pageSize}
                                        newShelfList={newShelfList}
                                        INITINFO={INITINFO}
                                        newShelfAllList={newShelfAllList}
                                        changeQuery={this.changeQuery}
                                    />
                                )
                            }
                        </TabPane>
                        <TabPane
                            key="3"
                            tab={
                                <span>
                                    <MyIcon
                                        type="icongongzhonghao"
                                    />
                                    公众号配置
                                </span>
                            }
                        >
                            {
                                tabIndex === '3' && (
                                    <TencentInfo
                                        dispatch={dispatch}
                                        tabIndex={tabIndex}
                                        tencentDetail={tencentDetail}
                                    />
                                )
                            }
                        </TabPane>
                    </Tabs>
                </Card>
            </>
        );
    }
}

export default TencentConfigElem;
